<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml>

<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <link rel="shortcut icon" type=image/png href=https://ffuqingsong.gitee.io/pic-go-demo/img/avatar.png>
    <title>three-particle</title>

<body>
    <script
        src=https://ffuqingsong.gitee.io/special-effects/effect/three-particle/three.min.js></script>
    <div></div>
    <script>
        var Stats = function () {
            var e = Date.now(),
                t = e,
                n = 0,
                i = 1 / 0,
                o = 0,
                d = 0,
                a = 1 / 0,
                r = 0,
                l = 0,
                s = 0,
                c = document.createElement("div");
            c.id = "stats", c.addEventListener("mousedown", function (e) {
                e.preventDefault(), w(++s % 2)
            }, !1), c.style.cssText = "width:80px;opacity:0.9;cursor:pointer";
            var p = document.createElement("div");
            p.id = "fps", p.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002", c
                .appendChild(p);
            var h = document.createElement("div");
            h.id = "fpsText", h.style.cssText =
                "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px",
                h.innerHTML = "FPS", p.appendChild(h);
            var m = document.createElement("div");
            for (m.id = "fpsGraph", m.style.cssText =
                "position:relative;width:74px;height:30px;background-color:#0ff", p.appendChild(m); 74 > m.children
                .length;) {
                var u = document.createElement("span");
                u.style.cssText = "width:1px;height:30px;float:left;background-color:#113", m.appendChild(u)
            }
            var f = document.createElement("div");
            f.id = "ms", f.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none",
                c.appendChild(f);
            var x = document.createElement("div");
            x.id = "msText", x.style.cssText =
                "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px",
                x.innerHTML = "MS", f.appendChild(x);
            var v = document.createElement("div");
            for (v.id = "msGraph", v.style.cssText =
                "position:relative;width:74px;height:30px;background-color:#0f0", f.appendChild(v); 74 > v.children
                .length;) {
                var u = document.createElement("span");
                u.style.cssText = "width:1px;height:30px;float:left;background-color:#131", v.appendChild(u)
            }
            var w = function (e) {
                    switch (s = e) {
                        case 0:
                            p.style.display = "block", f.style.display = "none";
                            break;
                        case 1:
                            p.style.display = "none", f.style.display = "block"
                    }
                },
                E = function (e, t) {
                    var n = e.appendChild(e.firstChild);
                    n.style.height = t + "px"
                };
            return {
                REVISION: 11,
                domElement: c,
                setMode: w,
                begin: function () {
                    e = Date.now()
                },
                end: function () {
                    var s = Date.now();
                    return n = s - e, i = Math.min(i, n), o = Math.max(o, n), x.textContent = n + " MS (" + i +
                        "-" + o + ")", E(v, Math.min(30, 30 - 30 * (n / 200))), l++, s > t + 1e3 && (d = Math
                            .round(1e3 * l / (s - t)), a = Math.min(a, d), r = Math.max(r, d), h.textContent =
                            d + " FPS (" + a + "-" + r + ")", E(m, Math.min(30, 30 - 30 * (d / 100))), t = s,
                            l = 0), s
                },
                update: function () {
                    e = this.end()
                }
            }
        };
        ! function () {
            "use strict";

            function e() {
                for (p = window.innerHeight, h = window.innerWidth, C = h / 2, H = p / 2, m = 75, u = h / p, f = 1, x =
                    300, b = x / 3, R = 0, S = 7e-4, l = new THREE.PerspectiveCamera(m, u, f, x), l.position.z = b, r =
                    new THREE.Scene, r.fog = new THREE.FogExp2(R, S), c = document.createElement("div"), document.body
                    .appendChild(c), document.body.style.margin = 0, document.body.style.overflow = "hidden", w =
                    new THREE.Geometry, E = 2e4, g = 0; E > g; g++) {
                    var e = new THREE.Vector3;
                    e.x = 2e3 * Math.random() - 1e3, e.y = 2e3 * Math.random() - 1e3, e.z = 2e3 * Math.random() - 1e3, w
                        .vertices.push(e)
                }
                for (W = [
                        [
                            [1, 1, .5], 5
                        ],
                        [
                            [.95, 1, .5], 4
                        ],
                        [
                            [.9, 1, .5], 3
                        ],
                        [
                            [.85, 1, .5], 2
                        ],
                        [
                            [.8, 1, .5], 1
                        ]
                    ], k = W.length, g = 0; k > g; g++) T = W[g][0], M = W[g][1], L[g] = new THREE.PointCloudMaterial({
                        size: M
                    }), z = new THREE.PointCloud(w, L[g]), z.rotation.x = 6 * Math.random(), z.rotation.y = 6 * Math
                    .random(), z.rotation.z = 6 * Math.random(), r.add(z);
                s = new THREE.WebGLRenderer, s.setPixelRatio(window.devicePixelRatio), s.setSize(h, p), c.appendChild(s
                        .domElement), v = new Stats, v.domElement.style.position = "absolute", v.domElement.style.top =
                    "0px", v.domElement.style.right = "0px", c.appendChild(v.domElement), window.addEventListener(
                        "resize", a, !1), document.addEventListener("mousemove", i, !1), document.addEventListener(
                        "touchstart", o, !1), document.addEventListener("touchmove", d, !1)
            }

            function t() {
                requestAnimationFrame(t), n(), v.update()
            }

            function n() {
                var e = 5e-5 * Date.now();
                for (l.position.x += .05 * (P - l.position.x), l.position.y += .05 * (-D - l.position.y), l.lookAt(r
                        .position), g = 0; g < r.children.length; g++) {
                    var t = r.children[g];
                    t instanceof THREE.PointCloud && (t.rotation.y = e * (4 > g ? g + 1 : -(g + 1)))
                }
                for (g = 0; g < L.length; g++) T = W[g][0], y = 360 * (T[0] + e) % 360 / 360, L[g].color.setHSL(y, T[1],
                    T[2]);
                s.render(r, l)
            }

            function i(e) {
                P = e.clientX - C, D = e.clientY - H
            }

            function o(e) {
                1 === e.touches.length && (e.preventDefault(), P = e.touches[0].pageX - C, D = e.touches[0].pageY - H)
            }

            function d(e) {
                1 === e.touches.length && (e.preventDefault(), P = e.touches[0].pageX - C, D = e.touches[0].pageY - H)
            }

            function a() {
                C = window.innerWidth / 2, H = window.innerHeight / 2, l.aspect = window.innerWidth / window
                    .innerHeight, l.updateProjectionMatrix(), s.setSize(window.innerWidth, window.innerHeight)
            }
            var r, l, s, c, p, h, m, u, f, x, v, w, E, g, y, T, M, C, H, b, R, S, k, z, L = [],
                P = 0,
                D = 0,
                W = {};
            e(), t()
        }();
    </script>